<template>
<div>
  <el-menu
      style="width: 300px;min-height: calc(100vh - 10px)"
      :default-active=0
      class="el-menu-vertical-demo"
      >
<!--      @open="handleOpen"-->
<!--      @close="handleClose"-->
<!--  >-->
    <div v-for="(item,i) in tableData" :key="item.id" >
      <span>{{this.categoryIndex}}</span>
      <div v-if="i==tableData.length-1" @click="add(spareId)">
        <el-menu-item index=item.id >
          <span  style="font-size: 18px">添加新栏目</span>
        </el-menu-item>
      </div>
      <div v-else >
        <el-menu-item :index=i :class="{active:categoryIndex==index}" @click="setMsg(item.id,i)">
          <span  style="font-size: 18px">{{item.name}}</span>
        </el-menu-item>
      </div>
    </div>


<!--    <el-menu-item :index="i" v-for="(item, i) in tableData" :key="item.id" :class="{active:categoryIndex==i}" @click="saveNavState(i,item.id,spareId)">-->
<!--        {{item.name}}-->
<!--      </el-menu-item>-->



  </el-menu>
  </div>
  <el-dialog title="提示" v-model="dialogVisible" width="40%">
    <el-form :model="form" label-width="120px">
      <el-form-item label="题目">
        <el-input v-model="form.name" style="width: 80%"></el-input>
      </el-form-item>
    </el-form>
    <template #footer>
        <span slot="footer" class="dialog-footer">
          <el-button @click="dialogVisible = false">取 消</el-button>
          <el-button type="primary" @click="save">确 定</el-button>
        </span>
    </template>
  </el-dialog>

</template>

<script>
import request from "@/utils/request";
import {toRaw} from "vue";

export default {
  name: "Aside",
  props:["spareId"],
  data(){
    return {
      form:{},
      Data:'',
      dialogVisible:false,
      categoryIndex: 0,
      tableData:[
      ],
    }
  },
  created() {
    this.categoryIndex = sessionStorage.getItem('$index') || 0;
    this.load();
  },
  methods:{
    load(){
      request.get("/page4block",{
        params:{
          search:this.spareId,
        }
      }).then(res=>{
        console.log(res);
        this.tableData=res;
        if(this.tableData.length>0){this.Data=this.tableData[0].id;}
        this.tableData.push({});
        console.log(this.tableData[0]);
      })
    },
    add(pageId){
      this.form={};
      this.form.pageId=pageId;
      this.dialogVisible=true;
    },
    save(){
      {
      request.post("/page4block", this.form).then(res=>{
        console.log(res);
        this.$message({
          type:"success",
          message:"新增成功"
        })
      })
    }
    this.dialogVisible=false;
      this.load();
    },
    setMsg(id,i){
      this.$emit('transfer',id);
      this.categoryIndex = i;
      sessionStorage.setItem('$index', i);
    },
  //   saveNavState(i,id,spareId){
  //     if(i==this.tableData.length-1){
  //       this.add(spareId)
  //     }else{
  //       this.$emit('transfer',id);
  //       this.categoryIndex = i;
  //       sessionStorage.setItem('$index', i);
  //     }
  // }

  }
}
</script>


<style scoped>

</style>
